<!-- <!DOCTYPE>声明：是指示web浏览器关于页面使用哪个HTML版本进行编写的指令 -->
<!-- <!DOCTYPE>声明：不是HTML标签。HTML5不基于SGML，所以不需要引用DTD -->
<!DOCTYPE html>
<!-- <html>与</html>标签：限定了文档的开始点和结束点 -->
<html lang="zh">
<!-- head标签：定义文档的头部 -->
<head>
    <!-- meta标签：描述性标签，描述网站的一些信息 -->
    <meta charset="UTF-8"/>
    <!-- title标签：网页标题 -->
    <title>订单管理系统</title>
    <!-- meta标签：一般用来做SEO（搜索引擎优化） -->
    <meta name="keywords" content="道璞,订单,订单管理,订单管理系统"/>
    <meta name="description" content="道璞订单管理系统"/>
    <link rel="shortcut icon" type="image/x-icon" href="../image/notebook2.svg"/>
    <link rel="stylesheet" href="../css/style.css">
</head>
<!-- body标签：定义文档的主体 -->
<body onload="init()">
<!-- 布局标签（结构化语义标签） -->
<!-- header标签：定义文档的页眉（介绍信息） -->
<header></header>
<!-- nav标签：定义导航链接的部分 -->
<nav></nav>
<!-- aside标签：可用作文章的侧栏 -->
<aside></aside>
<!-- main标签：规定文档的主要内容。一个网页只能有一个main标签 -->
<!-- main标签：是网页的特异性部分，不应该包含网页中复用的部分 -->
<main>
    <div class="mainbox">
        <div class="initOrderBox">
            <div id="title">
                待做订单
            </div>
            <table id="exportTable">
                <tr>
                    <td>
                        <select name="color" id="colorSelect" onchange="init()">
                            <option value ="黑色">黑色</option>
                            <option value ="香槟色">香槟色</option>
                        </select>
                    </td>
                    <td>
                        <button class="button-login" onclick="exportOrder()">导出工单（存入条码表）</button>
                    </td>
                    <td>
                        <button class="button-login" onclick="exportBarCode()">导出条码表</button>
                    </td>
                    <td>
                        <button class="button-login" onclick="window.location.href='oddment.html'">查看余料</button>
                    </td>
                </tr>
            </table>
            <div align="left">
                <font color="red" size="3">
                    请先导出工单再导出条码表！每批数据只能导出一次！（导出工单时自动存入条码表）
                </font><br/>
                <input id="accountInput" placeholder="旺旺号"/><button onclick="init()">搜索</button>
            </div>
            <table id="out_order_table" name="outOrder" border="1">
                <tr>
                    <td>编号</td>
                    <td>旺旺号</td>
                    <td>颜色</td>
                    <td>衣杆长度（㎜）</td>
                    <td>数量</td>
                    <td>修改</td>
                    <td>删除</td>
                </tr>
            </table>
        </div>
    </div>
</main>
<!-- footer标签：定义文档或节的页脚 -->
<footer></footer>
</body>
<script>
    const outOrderTable = document.getElementById("out_order_table");
    function init() {
        const color = document.getElementById("colorSelect").value;
        const account = document.getElementById("accountInput").value;
        const xhr = new XMLHttpRequest();
        xhr.responseType = "json";
        xhr.open("GET", "/order/getOutOrder?color=" + color + "&account=" + account);
        xhr.send();
        xhr.onreadystatechange = function () {
            if (xhr.readyState === 4) {
                if (xhr.status === 200) {
                    cleanTableRows();
                    for (let i = 0; i < xhr.response.data.length; i++) {
                        addTr(xhr.response.data[i]);
                    }
                }
            }
        }
    }
    function addTr(outOrder) {
        const row = outOrderTable.insertRow();
        row.id = outOrder.id;
        row.insertCell().innerHTML = outOrder.number;
        row.insertCell().innerHTML = outOrder.account;
        row.insertCell().innerHTML = outOrder.color;
        row.insertCell().innerHTML = outOrder.clothesRodLength;
        row.insertCell().innerHTML = outOrder.quantity;
        row.insertCell().innerHTML = "<button onclick='updateOrder(this)'>修改</button>";
        row.insertCell().innerHTML = "<button onclick='deleteOrder(this)'>删除</button>";
    }
    function updateOrder(updatebtn) {
        const tr = updatebtn.parentNode.parentNode;
        window.location.href="updateOrder.html?id=" + tr.id
            + "&account=" + tr.cells[1].innerHTML
            + "&color=" + tr.cells[2].innerHTML
            + "&clothesRodLength=" + tr.cells[3].innerHTML
            + "&quantity=" + tr.cells[4].innerHTML;
    }
    function deleteOrder(deletebtn) {
        const tr = deletebtn.parentNode.parentNode;
        if (confirm("确认删除用户 " + tr.cells[1].innerHTML + " 的此条工单?"
            + "\u000d颜色：" + tr.cells[2].innerHTML
            + "\u000d长度：" + tr.cells[3].innerHTML
            + "\u000d数量：" + tr.cells[4].innerHTML)) {
            const xhr = new XMLHttpRequest();
            xhr.open("DELETE", "/order/deleteOrder?id=" + tr.id);
            xhr.setRequestHeader("Content-Type", "application/json");
            xhr.send();
            xhr.onreadystatechange = function () {
                if (xhr.readyState === 4) {
                    if (xhr.status === 200) {
                        alert("删除成功！");
                        window.location.replace('initOrder.html');
                    } else {
                        alert("删除失败。");
                    }
                }
            }
        }
    }
    function cleanTableRows() {
        const rows = outOrderTable.rows;
        for (let i = rows.length; i > 1; i--) {
            rows[i - 1].remove();
        }
    }
    function exportOrder() {
        const color = document.getElementById("colorSelect").value;
        window.open('../order/exportOrder?color=' + color);
    }
    function exportBarCode() {
        const color = document.getElementById("colorSelect").value;
        window.open('../order/exportBarCode?color=' + color);
    }
</script>
</html>